/*jshint -W065 */
<template lang="html">
	<div>
		<div id="ossfile"></div>

		<br/>

		<div id="container">
			<flexbox>
				<flexbox-item>
					<x-button id="selectfiles" href="javascript:void(0);" :gradients="['#FF2719', '#FF61AD']">{{chooseText}}</x-button>
				</flexbox-item>
				<flexbox-item>
					<x-button id="postfiles" href="javascript:void(0);" :gradients="['#1D62F0', '#19D5FD']">{{uploadText}}</x-button>
				</flexbox-item>
			</flexbox>


		</div>

		<pre id="console">{{message}}</pre>

		<p>&nbsp;</p>
	</div>
</template>

<script>
	import plupload from '../../../../static/plupload-2.1.2/js/plupload.full.min.js'
	//import mOxie from '../../../../static/plupload-2.3.6/js/moxie.js'
	//import plupload from '../../../../static/plupload-2.3.6/js/plupload.dev.js'
	import {XButton,Flexbox,FlexboxItem} from 'vux'

	export default {
		name: 'upload',
		components: {
			XButton,
			Flexbox,
			FlexboxItem
		},
		data() {
			return {
				chooseText: '',
				uploadText: '点击上传',
				ossFile: '',
				uploadMethod: '',
				accessid: '',
				accesskey: '',
				host: '',
				policyBase64: '',
				signature: '',
				callbackbody: '',
				filename: '',
				key: '',
				expire: 0,
				g_object_name: '',
				g_object_name_type: '',
				now: Date.parse(new Date()) / 1000,
				message: '',
				extensions: '',
				curFile: '',
				fileToAdd: ''
			};
		},
		props: {
			type: '',
			fileId: '',
			beforeUpload: Function,
			onSuccess: Function,
			onError: Function,
			onProgress: Function,
		},
		created() {
			if(this.type == 'video'){
				this.extensions = 'mp4,3gp,mov';
				this.chooseText = '选择视频';
			}else if(this.type == 'audio'){
				this.extensions = 'mp3,wav,amr';
				this.chooseText = '选择音频';
			}else{
				this.extensions = 'jpg,gif,png,bmp';
				this.chooseText = '选择图片';
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.upload();
			});
		},
		methods: {
			sendRequest() {
				const xmlhttp = new XMLHttpRequest();
				// 你的服务端接口地址:  参考demo:http://oss-demo.aliyuncs.com/oss-h5-upload-js-php/
				// 服务端签名后直传文档:  https://help.aliyun.com/document_detail/31926.html
				const serverUrl = 'http://www.edumavin.com:8080/api/oss/postpolicy';
				xmlhttp.open('GET', serverUrl, false);
				xmlhttp.setRequestHeader('Authorization', this.$store.state.user.token)
				xmlhttp.send(null);
				return xmlhttp.responseText;
			},
			getSignature() {
				// 可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
				this.now = Date.parse(new Date()) / 1000;
				if (this.expire < this.now + 3) {
					const body = this.sendRequest();
					const e = eval;
					const obj = e(`(${body})`);
					const policy = obj.postpolicy;
					this.host = policy.host;
					this.policyBase64 = policy.policy;
					this.accessid = policy.accessid;
					this.signature = policy.signature;
					this.expire = parseInt(policy.expire, 10);
					this.callbackbody = policy.callback;
					this.key = policy.dir;
					return true;
				}
				return false;
			},
			checkObjectRadio() {
				//make the file name as random
				this.g_object_name_type = 'random_name';
				/*debugger
				const tt = document.getElementsByName('myradio');
				for (let i = 0; i < tt.length; i += 1) {
					if (tt[i].checked) {
						this.g_object_name_type = tt[i].value;
						break;
					}
				}*/
			},
			randomString(len = 32) {
				const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				const maxPos = chars.length;
				let pwd = '';
				for (let i = 0; i < len; i += 1) {
					pwd += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			getSuffix(filename) {
				const pos = filename.lastIndexOf('.');
				let suffix = '';
				if (pos !== -1) {
					suffix = filename.substring(pos);
				}
				return suffix;
			},
			calculateObjectName(filename) {
				if (this.g_object_name_type === 'local_name') {
					this.g_object_name += `${filename}`;
				} else if (this.g_object_name_type === 'random_name') {
					const suffix = this.getSuffix(filename);
					this.g_object_name = this.key + this.randomString(10) + suffix;
				}
				return '';
			},
			getUploadedObjectName(filename) {
				if (this.g_object_name_type === 'local_name') {
					let tmpName = this.g_object_name;
					tmpName = tmpName.replace(`${filename}`, filename);
					return tmpName;
				} else if (this.g_object_name_type === 'random_name') {
					return this.g_object_name;
				}
				return '';
			},
			setUploadParam(up, filename, ret) {
				if (ret === false) {
					this.getSignature();
				}
				this.g_object_name = this.key;
				if (filename !== '') {
					this.calculateObjectName(filename);
				}
				const newMultipartParams = {
					key: this.g_object_name,
					policy: this.policyBase64,
					OSSAccessKeyId: this.accessid,
					// 让服务端返回200,不然，默认会返回204
					success_action_status: '200',
					signature: this.signature,
					callback: this.callbackbody,
				};
				up.setOption({
					url: this.host,
					multipart_params: newMultipartParams,
				});
				up.start();
			},
			upload() {
				const that = this;
				const uploader = new plupload.Uploader({
					runtimes: 'html5,flash,silverlight,html4',
					browse_button: 'selectfiles',
					multi_selection: false,
					container: document.getElementById('container'),
					flash_swf_url: '../../../../static/plupload-2.1.2/js/Moxie.swf',
					silverlight_xap_url: '../../../../static/plupload-2.1.2/js/Moxie.xap',
					url: 'http://oss.aliyuncs.com',
					filters: {
						mime_types: [{
							title: '允许上传文件类型',
							extensions: this.extensions
							//extensions: 'mp4,3gp',
							//extensions: 'jpg,gif,png,bmp',
						}],
						// 最大只能上传200mb的文件
						max_file_size: '200mb',
						// 不允许队列中存在重复文件
						prevent_duplicates: true,
					},
					init: {
						PostInit: () => {
							this.ossFile = '';
							document.getElementById('postfiles').onclick = () => {
								that.setUploadParam(uploader, '', false);
								// console.log('...');
								return false;
							};
						},
						FilesAdded: (up, files) => {
							plupload.each(files, (file) => {
								that.uploadText = '点击上传';

								if(that.curFile == ''){
									that.curFile = file;
								}else{
									up.removeFile(that.curFile);
									that.curFile = file;
								}

								document.getElementById('ossfile').innerHTML = `<div id="${file.id}">文件大小：${plupload.formatSize(file.size)}<br><b></b><div class="progress"><div class="progress-bar" style="width: 0"></div></div></div>`;
								that.message = '';

							});
						},

						BeforeUpload: (up, file) => {
							that.checkObjectRadio();
							that.setUploadParam(up, file.name, true);
						},
						UploadProgress: (up, file) => {
							const d = document.getElementById(file.id);
							d.getElementsByTagName('b')[0].innerHTML = `<span>${file.percent}%</span>`;
							const prog = d.getElementsByTagName('div')[0];
							const progBar = prog.getElementsByTagName('div')[0];
							progBar.style.width = `${2 * file.percent}px`;
							progBar.setAttribute('aria-valuenow', file.percent);

							if(file.percent < 100){
								that.uploadText = '上传中...'
							}else if(file.percent == 100){
								that.uploadText = '上传完毕！'
							}
						},
						FileUploaded: (up, file, info) => {
							if (info.status === 200) {
								const e = eval;
								const obj = e(`(${info.response})`);
								this.$emit('setVideoUrl', obj.fileurl);
								//document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML
									//= 'upload to oss success, object name:' + this.getUploadedObjectName(file.name) + ' 回调服务器返回的内容是:' + info.response;
							} else {
								document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
							}
						},
						Error: (up, err) => {
							console.log('上传失败：', err, that.onError, up);
							if (err.code === -600) {
								that.message = '文件大小超出限制，限制大小为200M';
							} else if (err.status === 403) {
								// console.log('tocken过期，请刷新页面后再上传文件!');
								that.message = '页面失效，请刷新页面后重新上传文件!';
							} else {
								// console.log('文件上传失败，请刷新页面后重新上传文件！');
								that.message = '上传失败，请刷新页面后重新上传文件！';
							}
							if (that.onError) {
								that.onError(err.message, up, err);
							}
						},
					},
				});
				uploader.init();
			}
		},
	};
</script>
<style src="./upload.css"></style>
